<template>
	<view class="signUp">
		<u-navbar :is-back="false" :border-bottom="false" title-color="#111">
			<view class="page_navbar_warp" @click="goBack">
				<image src="../../static/images/outpatient/left.png" mode="" class="navLeft"></image>
			</view>
		</u-navbar>
		
		<image src="../../static/images/outpatient/11.png" mode="" class="banner"></image>
		<view class="content">
			<view class="box" v-if="!is_baoming">
				<view class="item">
					<u-input type="text" value="" placeholder="请输入您的姓名" v-model="name" height="80" />
				</view>
				<view class="item">
					<u-input type="number" value="" placeholder="请输入您的手机号" v-model="mobile" height="80" />
				</view>
				<view class="price">
					<view class="left">
						<text class="text1">报名费</text>
						<text class="text2">￥{{price}}</text>
					</view>
					<view class="btn" @click="submit" v-if="btnShow">立即报名</view>
					<view class="btn2" v-if="!btnShow">立即报名</view>
				</view>
			</view>
			<view class="box2"  v-if="is_baoming">
				<view class="item">{{clinc.name}}</view>
				<view class="item">{{clinc.mobile}}</view>
				<view class="price">
					<view class="btn">报名成功</view>
				</view>
			</view>

		</view>

	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				price:'',
				name: '',
				mobile: '',
				clinc_activity_id:'',//活动id
				btnShow:true,
				clinc: null,
				is_baoming: false,
			}
		},
		onLoad(option) {
			console.log(option);
			if(option){
				this.clinc_activity_id = option.clinc_activity_id;
				this.price = option.price;
				this.$https("outpatient.userisbaoming",{
					clinc_activity_id:option.clinc_activity_id,
					store_id:option.store_id
				}).then(res=>{
					if(res.code == 1){
						this.clinc = res.data.clinc;
						this.is_baoming = res.data.is_baoming;
					}
				})
			}
		},
		onShow() {
			
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 300
				});
			},
			submit() {
				if (this.name == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入您的姓名',
					});
				} else if (!this.$u.test.mobile(this.mobile)) {
					uni.showToast({
						icon: 'none',
					 title: '手机号码输入有误',
					});
				}else{
					uni.navigateTo({
						url: '/pages/outpatient/pay?clinc_activity_id='+this.clinc_activity_id+'&price='+this.price+'&name='+this.name+'&mobile='+this.mobile
					})
				}
			}
		},
	}
</script>
<style scoped lang="scss">
	.signUp {
		position: relative;
		width: 100%;
		min-height: 100vh;
		background: #fff;

		.page_navbar_warp {
			display: flex;
			align-items: center;
			flex: 1;
			padding: 0 28rpx;

			.navLeft {
				width: 15rpx;
				height: 28rpx;
			}
		}

		.banner {
			display: block;
			width: 100%;
			height: 730rpx;
		}

		.content {
			width: 100%;
			height: 779rpx;
			background: linear-gradient(180deg, #6CAADE 0%, rgba(108, 170, 222, 0) 100%);
			padding: 90rpx 47rpx 0;

			.box {
				// width: 694rpx;
				height: 453rpx;
				margin: auto;
				background: #FFFFFF;
				border-radius: 30rpx;
				padding-top: 50rpx;

				.item {
					width: 600rpx;
					height: 80rpx;
					margin: 0 auto 10rpx;
					background: #FFFFFF;
					border: 1rpx solid #DDDDDD;
					border-radius: 40rpx;
					padding: 0 30rpx;
				}

				.price {
					margin-top: 80rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;

						.text1 {
							font-size: 24rpx;
							color: #777;
						}

						.text2 {
							font-size: 38rpx;
							font-weight: bold;
							color: #F35C0F;
							margin-left: 20rpx;
						}
					}

					.btn {
						width: 300rpx;
						height: 80rpx;
						line-height: 80rpx;
						background: #DFB982;
						border-radius: 40rpx;
						font-size: 40rpx;
						font-weight: bold;
						color: #fff;
						text-align: center;
					}
					.btn2 {
						width: 300rpx;
						height: 80rpx;
						line-height: 80rpx;
						background: #ccc;
						border-radius: 40rpx;
						font-size: 40rpx;
						font-weight: bold;
						color: #fff;
						text-align: center;
					}
				}
			}
			
			.box2 {
				// width: 694rpx;
				height: 453rpx;
				margin: auto;
				background: #FFFFFF;
				border-radius: 30rpx;
				padding-top: 50rpx;
			
				.item {
					width: 600rpx;
					height: 80rpx;
					line-height: 80rpx;
					margin: 0 auto 10rpx;
					background: #FFFFFF;
					border: 1rpx solid #fff;
					border-radius: 40rpx;
					padding: 0 30rpx;
					font-size: 40rpx;
					font-weight: bold;
					color: #111;
				}
			
				.price {
					margin-top: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;

			
					.btn {
						width: 300rpx;
						height: 80rpx;
						line-height: 80rpx;
						background: #DFB982;
						border-radius: 40rpx;
						font-size: 40rpx;
						font-weight: bold;
						color: #fff;
						text-align: center;
					}
					.btn2 {
						width: 300rpx;
						height: 80rpx;
						line-height: 80rpx;
						background: #ccc;
						border-radius: 40rpx;
						font-size: 40rpx;
						font-weight: bold;
						color: #fff;
						text-align: center;
					}
				}
			}

		}
	}
</style>
